<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/page/layui/css/layui.css" media="all">
    <script src="/page/js/vue.js"></script>
    <script src="/page/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/page/css/zoom.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="project">
<br>
<div class="layui-progress layui-progress-big" lay-showpercent="true">
    <div class="layui-progress-bar" :lay-percent="project.projectInPhase + '/ 27' "></div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline" >
    <li class="layui-timeline-item" v-if="designer!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">分配设计师</h3>
            <p>
                {{designer.empName}}
                <br>{{designer.empEmail}}
                <br>{{designer.empTel}}
        </div>
    </li>
    <li class="layui-timeline-item" v-if="contract!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">设计图纸</h3>
            <div><img v-for="cont in contract" :src="cont.contractScanning" style="height: 200px;margin-left: 10px;"
                      data-action="zoom"></div>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="plan!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">合同</h3>
            <div><img v-for="pla in plan" :src="pla.planDesignPaper" style="height: 200px;margin-left: 10px;"
                      data-action="zoom"></div>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="construction!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">施工图纸</h3>
            <div><img v-for="cons in construction" :src="cons.constructionProductionDrawing"
                      style="height: 200px;margin-left: 10px;" data-action="zoom"></div>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="floorPlan!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">房屋户型图</h3>
            <div><img :src="floor.floorPlan" v-for="floor in floorPlan" style="height: 200px;margin-left: 10px"
                      data-action="zoom"></div>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="manager!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">分配项目经理</h3>
            <p>
                {{manager.empName}}
                <br>{{manager.empEmail}}
                <br>{{manager.empTel}}
            </p>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="supervision!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">分配监理</h3>
            <p>
                {{supervision.empName}}
                <br> {{supervision.empEmail}}
                <br>{{supervision.empTel}}
            </p>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase1material!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">一阶段材料列表</h3>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>材料类别</th>
                    <th>材料名</th>
                    <th>材料数量</th>
                    <th>材料价格</th>
                    <th>共计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="material in inPhase1material">
                    <td v-text="material.material_category">贤心</td>
                    <td v-text="material.material_name">汉族</td>
                    <td v-text="material.material_list_num">1989-10-14</td>
                    <td v-text="material.material_price">人生似修行</td>
                    <td v-text="material.material_list_total"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase1acceptance!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">一阶段验收资料</h3>
            <div><img :src="inPhase1.receiptReceipt1" v-for="inPhase1 in inPhase1acceptance"
                      style="height: 200px;margin-left: 10px" data-action="zoom"></div>

        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase2material!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">二阶段材料列表</h3>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>材料类别</th>
                    <th>材料名</th>
                    <th>材料数量</th>
                    <th>材料价格</th>
                    <th>共计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="material in inPhase2material">
                    <td v-text="material.material_category">贤心</td>
                    <td v-text="material.material_name">汉族</td>
                    <td v-text="material.material_list_num">1989-10-14</td>
                    <td v-text="material.material_price">人生似修行</td>
                    <td v-text="material.material_list_total"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase2acceptance!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">二阶段验收资料</h3>
            <div><img :src="inPhase1.receiptReceipt1" v-for="inPhase1 in inPhase2acceptance"
                      style="height: 200px;margin-left: 10px" data-action="zoom"></div>

        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase3material!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">三阶段材料列表</h3>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>材料类别</th>
                    <th>材料名</th>
                    <th>材料数量</th>
                    <th>材料价格</th>
                    <th>共计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="material in inPhase3material">
                    <td v-text="material.material_category">贤心</td>
                    <td v-text="material.material_name">汉族</td>
                    <td v-text="material.material_list_num">1989-10-14</td>
                    <td v-text="material.material_price">人生似修行</td>
                    <td v-text="material.material_list_total"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase3acceptance!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">三阶段验收资料</h3>
            <div><img :src="inPhase1.receiptReceipt1" v-for="inPhase1 in inPhase3acceptance"
                      style="height: 200px;margin-left: 10px" data-action="zoom"></div>

        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase4material!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">四阶段材料列表</h3>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>材料类别</th>
                    <th>材料名</th>
                    <th>材料数量</th>
                    <th>材料价格</th>
                    <th>共计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="material in inPhase4material">
                    <td v-text="material.material_category">贤心</td>
                    <td v-text="material.material_name">汉族</td>
                    <td v-text="material.material_list_num">1989-10-14</td>
                    <td v-text="material.material_price">人生似修行</td>
                    <td v-text="material.material_list_total"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase4acceptance!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">四阶段验收资料</h3>
            <div><img :src="inPhase1.receiptReceipt1" v-for="inPhase1 in inPhase4acceptance"
                      style="height: 200px;margin-left: 10px" data-action="zoom"></div>

        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase5material!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">五阶段材料列表</h3>
            <table class="layui-table" lay-even="" lay-skin="row">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>材料类别</th>
                    <th>材料名</th>
                    <th>材料数量</th>
                    <th>材料价格</th>
                    <th>共计</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="material in inPhase5material">
                    <td v-text="material.material_category">贤心</td>
                    <td v-text="material.material_name">汉族</td>
                    <td v-text="material.material_list_num">1989-10-14</td>
                    <td v-text="material.material_price">人生似修行</td>
                    <td v-text="material.material_list_total"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="layui-timeline-item" v-if="inPhase5acceptance!=null">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">五阶段验收资料</h3>
            <div><img :src="inPhase1.receiptReceipt1" v-for="inPhase1 in inPhase5acceptance"
                      style="height: 200px;margin-left: 10px" data-action="zoom"></div>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">项目结束</div>
        </div>
    </li>
</ul>
</div>
<script src="/page/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var _this;
    var projectNo = window.location.href.split("?")[1]
    var vue = new Vue({
        el: "#project",
        data: {
            designer: {},//设计师
            plan: [],//设计图
            contract: [],//合同
            construction: [],//施工图
            floorPlan: [],//户型图
            manager: {},//项目经理
            supervision: {},//监理
            inPhase1material: [],
            inPhase1acceptance: [],
            inPhase2material: [],
            inPhase2acceptance: [],
            inPhase3material: [],
            inPhase3acceptance: [],
            inPhase4material: [],
            inPhase4acceptance: [],
            inPhase5material: [],
            inPhase5acceptance: [],
            project: {},
        },
        created: function () {
            _this = this;
            console.log(projectNo)
            $.ajax({
                url: "/project/project/getProjectDetails",
                data: {projectNo: projectNo},
                dataType: "json",
                type: "get",
                success: function (res) {
                    res = res.data
                    _this.designer = res.designer;
                    _this.plan = res.plan;
                    _this.contract = res.contract;
                    _this.construction = res.construction;
                    _this.floorPlan = res.floorPlan;
                    _this.manager = res.manager;
                    _this.supervision = res.supervision;
                    _this.inPhase1material = res.inPhase1material;
                    _this.inPhase1acceptance = res.inPhase1acceptance;
                    _this.inPhase2material = res.inPhase2material;
                    _this.inPhase2acceptance = res.inPhase2acceptance;
                    _this.inPhase3material = res.inPhase3material;
                    _this.inPhase3acceptance = res.inPhase3acceptance;
                    _this.inPhase4material = res.inPhase4material;
                    _this.inPhase4acceptance = res.inPhase4acceptance;
                    _this.inPhase5material = res.inPhase5material;
                    _this.inPhase5acceptance = res.inPhase5acceptance;
                    _this.project = res.project;
                    console.log(res)
                    console.log(_this)
                }

            })
        },
        compiled: function () {

        }
    });


    $(document).ajaxStop(function(){
        layui.use('element', function () {
            var element = layui.element;
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1'
                    , width: '100%' //设置容器宽度
                    , arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });
        });
    });
</script>
<script src="/page/js/zoom.js"></script>
</body>
</html>